<template>
	<view v-show="show">
		<view class='pop-show' />
		<view class='content'>
			<view class="hospital">
				<image src="../../static/ic_hospital.png" />
			</view>
			<picker id="hospital" @change="bindPickerChange" :range="hospitalNameList">
				<view class="choose-item">
					<text>{{hospitalName}}</text>
					<image src="../../static/ic_arrow_bottom.png" />
				</view>
			</picker>
			<picker id="dept" @change="bindPickerChange" :range="bedNameList">
				<view class="choose-item">
					<text>{{bedName}}</text>
					<image src="../../static/ic_arrow_bottom.png" />
				</view>
			</picker>
			<button class='confrom' @click='save'>确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['show', 'hospitalList','hospitalNameList','deptList','bedNameList','hospitalName','bedName'],
		data() {
			return {
				selectShow: false,
				deptIndex:0,
				hospitalIndex:0
			};
		},
	
		methods: {
			save: function() {
				this.show = false;
				let param = {
					"hospitalIndex":this.hospitalIndex,
					'deptList':this.deptList,
					'bedNameList':this.bedNameList,
					"deptIndex": this.deptIndex,
				}
				this.$emit("save", param);
			},
			bindPickerChange: function(e) {
				let type = e.currentTarget.id;
				let index = e.target.value;
				console.log(index);
				if (type == "hospital") {
					this.hospitalIndex  =index;
					
					let hospital = this.hospitalList[index];
					this.hospital = hospital;
					this.hospitalName = hospital.name;
					this.getDeptList(hospital.id);
				} else if (type == "dept") {
					this.deptIndex  =index;
					let item = this.deptList[index];
					this.dept = item;
					this.bedName = item.areaName + item.floor + item.layer;
				}
			},
			getDeptList: function(hospitalId) {
				this.$store.dispatch("getDepartmentList", hospitalId).then((depts) => {
					this.deptList = depts;
					this.bedNameList=[];
					for (let i = 0; i < depts.length; i++) {
						let item = depts[i];
						let bedName = item.areaName + item.floor + item.layer;
						this.bedNameList.push(bedName);
					}
					if (depts.length > 0) {
						this.deptIndex  = 0;
						let item = depts[0];
						this.dept = item;
						this.bedName = item.areaName + item.floor + item.layer;
						console.log(this.bedName);
					} else {
						this.bedName = "";
					}
				});
			},
		}
	}
</script>

<style>
	.pop-show {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		height: 100%;
		min-height: 100vh;
		flex-direction: column;
		background-color: black;
		opacity: 0.3;
	}

	.content {
		border-radius: 8upx;
		width: 80%;
		position: absolute;
		left: 10%;
		top: 188upx;
		z-index: 99;
		flex-direction: column;
		background-color: white;

	}

	.hospital {
		width: 100%;
		justify-content: center;
		display: flex;
		margin-top: 50upx;
		align-items: center;

	}

	.hospital image {
		width: 330upx;
		height: 218upx;
	}

	.choose-item {
		margin: 20upx 40upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		height: 90upx;
		align-items: center;
		padding: 0 30upx;
		background-color: #F8F8F8;
	}

	.choose-item text {
		font-size: 28upx;
		color: #757575;
		flex: 1;
	}

	.choose-item image {
		width: 25upx;
		height: 25upx;
		justify-content: flex-end;
	}

	.confrom {
		margin: 50upx 40upx;
		background-color: #b3548a;
		color: #FFFFFF;
		font-size: 28upx;
	}
</style>
